<template>
	<view v-if="pageShow" class="container">
		<!-- 需求详情 -->
		<view class="demand-info">
			<view class="title">
				<text class="name">{{ demandObj.name }}</text>
				<text class="status_new" :class="demandObj.status == 0 ? 'status0_new' : 'status1_new'">{{ demandObj.status ==
					0 ? '可参与' : demandObj.status == 1 ? '已中标' : demandObj.status == 2 ? '已取消' : '' }}</text>
				<!-- <image :src="isCollect === 0?'https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/shopImg/collect_icon.png':'https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/shopImg/collect_select.png'" class="collect-img" @click="setCollect"></image> -->
			</view>
			<view class="main-content">
				截止时间<text class="text">{{ $moment(demandObj.end_time_text).format('YYYY-MM-DD') }}</text>
			</view>
			<view class="main-content">
				预算金额<text class="text">{{ demandObj.money == 0 ? '面议' : demandObj.money }}</text>
			</view>
			<view class="main-content">
				需求类型<text class="text">{{ demandObj.cate.one_cate_name }}·{{ demandObj.cate.two_cate_name }}</text>
			</view>
			<view class="main-content">
				需求地区<text class="text">{{ demandObj.city_name }}</text>
			</view>
			<view class="main-content">
				需求描述<text class="text">{{ demandObj.describe }}</text>
			</view>
			<view v-if="demandObj.annex" class="main-img">
				<view class="img" v-for="(val, idx) in demandObj.annex.split(',')" :key="idx"
					@click.stop="viewImg(demandObj.annex)">
					<image :src="val" mode="aspectFill"></image>
				</view>
			</view>
			<view class="bottom-btn_new">
				<button class="btn" data-target="demandModal" @click="signDemand"
					:class="demandObj.status == 0 ? 'click-btn' : 'dis-btn'" :disabled="demandObj.status == 1">
					报名参与
				</button>
				<button v-if="contactTrue" class="btn-contact" @click="contactUser">
					去联系
				</button>
			</view>
		</view>

		<!-- 参与投标列表 -->
		<view class="join-info">
			<view class="title">
				参与投标（{{ joinList.length }}）
			</view>
			<view class="join-list solid-bottom" v-for="(item, index) in joinList" :key="index">
				<view class="header">
					<view class="service-info">
						<view class="name-content">
							<image class="service-img" :src="item.serviceinfo.logo" mode="aspectFill"></image>
							<text class="name">{{ item.serviceinfo.name }}</text>
						</view>
						<view class="service-text">
							<text>{{ getServiceType(item.serviceinfo.type) }}</text>
							<text style="margin-left: 8rpx;">保证金{{ item.serviceinfo.cash_deposit }}</text>
						</view>
					</view>
					<image v-if="item.is_success == 1"
						src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/demand/success-demand.png"
						class="success-img"></image>
				</view>
				<view class="service-des">
					<text>{{ item.illustrate }}</text>
				</view>
				<view v-if="item.pic" class="service-img">
					<view class="img" v-for="(val, idx) in item.pic.split(',')" :key="idx" @click.stop="viewImg(item.pic)">
						<image :src="val" mode="aspectFill"></image>
					</view>
				</view>
				<view class="btn_new">
					<view v-if="userId == demandObj.user_id && demandObj.status == 0 && item.is_success == 0" class="hire-btn"
						@click.stop="goHire(item.serviceinfo)">
						<text>雇佣TA</text>
					</view>
					<view v-if="userId != item.serviceinfo.user_id" class="go-contact" @click.stop="goContact(item)">
						<text>去沟通</text>
					</view>
				</view>
			</view>
			<view v-if="joinList.length === 0" class="empty-wrap">
				<image class="empty-img"
					src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/demand/no-joinList.png">
				</image>
				<text class="tips">暂无内容</text>
			</view>
		</view>

		<!-- 参与需求弹框 -->
		<view class="cu-modal" :class="demandModal == 'demandModal' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white" style="display: flex; justify-content: space-between; padding: 0 30rpx;">
					<view style="color: #666666;" @tap="hideModal">取消</view>
					<view style="color: #576B95;" @click="saveDemand">确定</view>
				</view>
				<view class="bg-white content">
					<view class="cu-form-group align-start solid-bottom" style="text-align: left;">
						<view class="title" style="color: #333; font-weight: bold;">投标说明</view>
						<textarea maxlength="-1" v-model="demandDes" placeholder="请尽可能的详细描述您的需求~"></textarea>
					</view>
					<view class="cu-bar bg-white">
						<view class="action" style="color: #333; font-weight: bold;">
							上传图片
						</view>
						<view class="action">
							{{ imgList.length }}/3
						</view>
					</view>
					<view class="cu-form-group">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage"
								:data-url="imgList[index]" style="text-align: left;">
								<image :src="imgList[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage" v-if="imgList.length < 3">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
					<view class="img-notice">
						仅支持png，jpg，jpeg格式，大小5M内 图片上传数量不超过3张
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script  type="text/javascript" src="plus-confusion://../enterpriseServer/demandDetails/index"></script>

<style lang="scss" scoped>
@import 'index.scss';
</style>